<script setup>
import { onMounted, ref } from 'vue'
import { getSearchHistoryFn, getRecommendSearchFn, delSearchHistoryFn } from '@/api/searchAPI'

const history = ref([])
const recommend_search = ref([])

onMounted(() => {
    getSearchHistoryFn().then(res => {
        if (res.code === '200') {
            history.value = res.data
        }
    })
    getRecommendSearchFn().then(res => {
        if(res.code === '200'){
            recommend_search.value = res.data
        }
    })
})

// 删除单条搜索记录
function delSearchHistoryClick(id){
    delSearchHistoryFn({ id }).then(res => {
        if(res.code === '200'){
            history.value = res.data
        }
    })
}
</script>
<template>
    <div id="box">
        <div class="top">
            <div class="left_back_btn" @click="$router.back()"><van-icon size="0.22rem" name="arrow-left" /></div>
            <div class="search_box">
                <van-icon size="0.18rem" color="#b0b0b0" name="search" />
                <input class="search_input" type="text" placeholder="月球背面发现外星物质">
            </div>
            <div class="search_btn">搜索</div>
        </div>
        <div class="search_history_box" v-show="history.length">
            <div class="title">
                搜索历史
            </div>
            <div class="box">
                <div class="con" v-for="i in history" :key="i.id">
                    <div class="text">{{ i.text }}</div>
                    <van-icon @click="delSearchHistoryClick(i.id)" size="0.1rem" color="gray" name="cross" />
                </div>
            </div>
        </div>
        <div class="recommend_search_box">
            <div class="title">
                猜你想搜
            </div>
            <div class="box">
                <div class="con" v-for="i in recommend_search" :key="i.id">
                    <div class="text">{{ i.text }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
#box {
    display: flex;
    flex-direction: column;

    .top {
        height: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.1rem;

        .left_back_btn {
            display: flex;
            margin-right: 0.16rem;
        }

        .search_box {
            height: 0.3rem;
            display: flex;
            align-items: center;
            flex: 1;
            background-color: #F8F8F8;
            border-radius: 0.3rem;
            padding: 0 0.1rem;
            box-sizing: border-box;

            .search_input {
                width: 100%;
                height: 0.2rem;
                margin-left: 0.06rem;
                font-size: 0.12rem;
                border: none;
                outline: none;
                background-color: #F8F8F8;
            }
        }

        .search_btn {
            margin-left: 0.1rem;
            font-size: 0.14rem;
            color: #FF644D;
        }
    }

    .search_history_box {
        display: flex;
        flex-direction: column;
        padding: 0.1rem 0.16rem;
    }

    .recommend_search_box{
        display: flex;
        flex-direction: column;
        padding: 0.1rem 0.16rem;
    }
}

.title {
    font-size: 0.12rem;
    color: gray;
    margin-bottom: 0.18rem;
}

.box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;

    .con {
        width: 46%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.1rem;

        .text {
            font-size: 0.13rem;
        }
    }
}
</style>